<template>
	<div style="display: flex;">
		<div style="width: 67%;">
			<h4>班级管理</h4>
			<hr>
			<table style=" width: 100%;">
				<tr>
					<td>编号</td>
					<td>名称</td>
					<td>修改</td>
					<td>删除</td>
				</tr>
				<tr v-for="z in clzs" style="line-height: 30px;">
					<td>{{z.clzno}}</td>
					<td>{{z.clzname}}</td>
					<td><button @click="go2Update(z)">upd</button></td>
					<td><button @click="doDel(z.clzno)">del</button></td>
				</tr>
			</table>
		</div>
		<hr >
		<div style="width: 30%;">
			<h4> {{actmsg[actidx]}}-表单输入</h4>
			
			<table style="line-height: 30px;">
				<tr>
					<td>编号：</td>
					<td><input style="width: 80%;"
					type="text" v-model="clz.clzno"
					v-bind:readonly="actidx != 0"></td>
				</tr>
				<tr>
					<td>名称：</td>
					<td><input style="width: 80%;"
					type="text" v-model="clz.clzname"></td>
				</tr>
				<tr v-if="actidx==0">
					<td></td>
					<td><button v-on:click="doAdd()">添加新的班级</button></td>
				</tr>
				<tr v-if="actidx==1">
					<td></td>
					<td><button v-on:click="doUpdate()">修改哈</button></td>
				</tr>
			</table>
		</div>
	</div>
	
</template>

<script setup>
	import axios from 'axios';
</script>
<script>
	export default{
		data(){
			return{
				clzs:[],
				//定义一个数组来显示不同的提示信息
				actmsg: ['添加','修改'],
				// actmsg[] 的下标， 当前的状态的下标 2, 默认显示状态
				actidx : 0,
				//定义一个对象和 表单做双向绑定 绑定
				clz : {clzno:'',clzname:''},
			}
		},
		methods:{
			findAll(){
				console.log("Clz准备显示");

				this.$get("/api/adm/clz/findAll")
				.then((resp)=>{
					console.log(resp.data.data);
					this.clzs = resp.data.data;
				})
			},
			go2Update(z){
				console.log("Clz去更新");
				this.actidx = 1;
				this.clz = z;

				console.log(token);
				this.$get("/api/adm/clz/findOne/",this.clz.clzno
				).then((resp)=>{
					console.log(resp.data.data);
					this.clz = resp.data.data;
				})
			},
			doUpdate(){
				console.log("Clz去更新");
				console.log(this.clz);
				
				this.$postx("/api/adm/clz/update",this.clz
				).then((resp)=>{
					console.log(resp.data.data);
					this.clzs = resp.data.data;
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "修改成功";
				})
				//更新还原添加
				this.actidx = 0;
				this.clz = {};
			},
			doAdd(){
				console.log("Clz添加");
				console.log(this.clz)
				
				this.$postx("/api/adm/clz/add",this.clz
				).then((resp)=>{
					console.log(resp.data.data);
					this.clzs = resp.data.data;
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "添加成功";
				})
			},
			doDel(clzno){
				console.log("Clz删除"); console.log("clzno："+clzno);
				this.clz.clzno = clzno;
				this.$get("/api/adm/clz/del?clzno="+clzno
				).then((resp)=>{
					console.log(resp.data.data);
					this.clzs = resp.data.data;
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "删除成功";
				})
			}
		},
		mounted() {
			console.log("初始化加载数据....");
			this.findAll();
		}
	}
</script>

<style>
</style>
